<template>
	<view class="ele">
		<input class="input" id="name" v-model="resource" placeholder="添加好友"/>
		<button @click="ser(resource)" >搜索好友</button>
	</view>
	<view>
		<view class="user" @click="jumpTo(item)" v-for="item in firend" key="user_id">
			<image :src="item.picture" style="width: 120rpx; height: 120rpx; margin-left: 30rpx; margin-right: 10rpx;"></image>
			<view class="tex">
				<view class="text-container">  
				    <text>{{item.user_name}}</text> <!-- 在这里下移文本 -->  
				</view>  
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { ref } from 'vue';
import { Person } from '../../public/p_interface';
	
	interface Firend{
		user_id:string,
		user_name: string,
		email: string,
		gender: number,
		introduce: string,
		picture:string
	}
	let firend = ref<Firend[]>();
	let resource = ref();
	
	const jumpTo =(item : Firend)=>{
		uni.navigateTo({
			url:'/pages/firend/friend_add?key='+encodeURIComponent(JSON.stringify(item))
		})
	}
	const ser =(data)=>{

			uni.request({
			    url: 'http://121.40.242.216:8081/api/user/ser_user',
				method:'POST',
			    data: {
					data:data
			    },
			    header: {
					'satoken':uni.getStorageSync("satoken"),
					'loginId':uni.getStorageSync("loginId")
					
			    },
			    success: (res) => {
					console.log(res.data)
					if(res.data!.data.type=="users"){
						
						const a =res.data!.data.data;
						console.log(a)
						uni.navigateTo({
							url:'/pages/firend/userTable?res='+encodeURIComponent(JSON.stringify(a))
						})
					}
					if(res.data!.data.type=="user"){
						console.log("user")
						uni.navigateTo({
							url:'/pages/person/home_page?id='+res.data!.data.data.user_id
						})
					}
			    }
			});

	}
	
	onLoad(()=>{
		uni.request({
		    url: 'http://121.40.242.216:8081/api/friend/apply_table',
			method:'GET',
		    data: {
		    },
		    header: {
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
				console.log(res.data)
				firend.value=res.data!.data
		    }
		});
	})
</script>

<style>
.user {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		margin-top: 20rpx;
    }
	.text-container {  
	        margin-top: 10rpx; /* 下移文本 */  
	    } 
	.tex{
		height: 120rpx;
		width: 600rpx;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
		border-bottom-color: rgb(199.5, 201, 204);
	}
	.input{
		width: 600rpx;
		height: 100rpx;
		background: aliceblue;
		border-radius: 30rpx;
	}
</style>